---
import { Icon } from '@astrojs/starlight/components';
import type { Props } from '@astrojs/starlight/props';

const { editUrl, labels, entry, locale, isFallback } = Astro.props;

const githubEditUrl =
	entry.data.githubURL && (locale === 'en' || isFallback)
		? `${entry.data.githubURL}${entry.data.hasREADME ? 'README.md' : ''}`
		: editUrl;
---

{
	editUrl && (
		<a href={githubEditUrl} class="sl-flex">
			<Icon name="pencil" size="1.2em" />
			{labels['page.editLink']}
		</a>
	)
}

<style>
	a {
		gap: 0.5rem;
		align-items: center;
		text-decoration: none;
		color: var(--sl-color-gray-3);
	}
	a:hover {
		color: var(--sl-color-white);
	}
</style>
